<template>
  <view :class="['home', themeClass]">
    <view class="search">
      <view class="set">
        <image :src="avatar" @click="goMy" />
      </view>
      <view class="title" @click="goSearch">搜索壁纸</view>
      <view class="icon" @click="changeOrder">
        <image v-if="order == 'new'" :src="newImg" />
        <image v-else :src="hotImg" />
      </view>
    </view>
    <view class="body">
      <ImgList @scrolltolower="scrolltolowerEvent" @refreshEvent="refreshEvent" :imgList="imgList" class="imgList">
      </ImgList>
      <Loading v-show='loading' class="loadMore"></Loading>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useTheme } from '@/hooks/useTheme'
const { themeClass } = useTheme()
import { onLoad } from '@dcloudio/uni-app'
import avatar from '@/static/images/icon.png'
import hotImg from '@/static/images/hot.png'
import newImg from '@/static/images/new.png'
import { getPhoneImgAll } from '@/services/home'
import { ref } from 'vue'
type ImgList = {
  small: string
  src: string
  tag: string
}
const imgList = ref<ImgList[]>([])
const page = ref(0)
const limit = ref(30)
const first = ref(0)
const order: any = ref('new')
const loading = ref(false)
const goMy = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}
const changeOrder = () => {
  if (order.value == 'new') {
    order.value = 'hot'
  } else {
    order.value = 'new'
  }
  page.value = 0
  imgList.value = []
  getData()
}
const refreshEvent = () => {
  page.value = 0
  imgList.value = []
  getData()
}
const getData = async () => {
  loading.value = true
  try {
    const res = await getPhoneImgAll({
      limit: limit.value,
      skip: page.value * limit.value,
      first: first.value,
      order: order.value
    })
    loading.value = false
    if (res.msg != 'success' || res.res.vertical.length == 0) return
    for (let i = 0; i < res.res.vertical.length; i++) {
      imgList.value.push({
        small: res.res.vertical[i].thumb,
        src: res.res.vertical[i].preview,
        tag: res.res.vertical[i].tag.join(' ')
      })
    }
  } catch (error) {
    loading.value = false
  }
}
const scrolltolowerEvent = () => {
  if (loading.value) return
  page.value++
  getData()
}
const goSearch = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}
onLoad(() => {
  getData()
})
</script>
<style scoped lang="scss">
.home {
  padding-top: var(--status-bar-height);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .search {
    padding: 5rpx 20rpx;
    display: grid;
    gap: 5px;
    grid-template-columns: 60rpx 1fr 60rpx;

    .set,
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 60rpx;
        width: 60rpx;
      }
    }

    .title {
      display: flex;
      align-items: center;
      background-color: #8c91943f;
      padding: 0 30rpx;
      font-size: 15px;
      color: grey;
      border-radius: 20px;
    }
  }

  .body {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .imgList {
      flex: 1;
    }

    .loadMore {
      left: 50%;
      transform: translateX(-50%);
      bottom: 20rpx;
      position: absolute;
    }
  }
}
</style>
